<template>
	<view class="shop_con">
		<view class="section">
			<view class="top">
				<view class="title">合肥市香薷中医诊所(庐阳店）</view>
				<view class="swiper">
					 <u-swiper height='333' :list="list"></u-swiper>
				</view>
				<view class="time">营业时间：{{shopDetail.shopBusinessHours}}</view>
				<view class="address">地址：{{shopDetail.shopAddress}}</view>
			</view>
			<view class="tabs_title">
				<span :class="{activeSpan:current === 0}" @click="reservaDocClick()">预约医师</span>
				
			</view>
			<view class="tabs_content">
				<view class="list" v-for="(val,index) in doctorList" :key="index">
					<view class="dayStatus">今日有号</view>
					<view class="info">
						<image :src="imgHttpsDev + val.doctorImg[0]"></image>
						<view class="info_box">
							<view class="up">
								<view class="name">{{val.doctorName}}</view>
								<view class="tag">{{val.introduction}}</view>
							</view>
							<view class="down">
								<view class="star">{{val.title}}</view>
							</view>
						</view>
					</view>
					<view class="label">
						<view class="card">
							<image src="/static/images/lable1.png"></image>
							<text>服务</text>
							<span>{{val.serviceCount}}</span>	
						</view>
						<view class="card">
							<image src="/static/images/lable2.png"></image>
							<text>评价</text>
							<span>{{val.ratingCount}}</span>	
						</view>
						<view class="card">
							<image src="/static/images/lable3.png"></image>
							<text>锦旗</text>
						<span>{{val.bannerCount}}</span>	
					</view>
					</view>
					<view class="descraption">
						{{val.expertise}}
					</view>
					<view class="bottomAppointment">
						<view class="btn" @click="appointmentClick(val)">挂号看诊</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
				<view class="left">联系客服</view>
			<view class="right">联系门店</view>
		</view>
	</view>
</template>

<script>
import { imgHttpsDev } from '@/utils/imgUrl'
import { getDoctorList } from '@/api/consultation'

	export default{
		data(){
			return{
				imgHttpsDev,
				current:0,
				shopDetail:{},
				doctorList:[],
				list: [
					{
						image: "https://cdn.uviewui.com/uview/xxx.jpg",
						title: "昨夜星辰昨夜风，画楼西畔桂堂东",
					},
					{
						image: "https://cdn.uviewui.com/uview/xxx.jpg",
						title: "身无彩凤双飞翼，心有灵犀一点通",
					},
					{
						image: "https://cdn.uviewui.com/uview/xxx.jpg",
						title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
					},
				],
			}
		},
		onLoad(opt) {
			this.shopDetail = JSON.parse(decodeURIComponent(opt.shopDetail))
			console.log(this.shopDetail)
			this.list = this.shopDetail.shopPhoto.map(item => {
				return {
					image: imgHttpsDev + item,
					title: this.shopDetail.shopName,
				}
			})
			this.getDoctorFun(this.shopDetail.shopCode)
		},
		methods:{
			// 医生列表
			async getDoctorFun(shopCode) {
				let that = this;
				let res = await getDoctorList({ shopCode: shopCode });
				console.log(res);
				if (res.code == 200) {
					that.doctorList = res.rows || [];
				}
			},
			// 预约详情
			appointmentClick(val){
				uni.navigateTo({
					url:"/pages/tabbar/home/appointment?shopCode="+val.shopCode+'&departmentCode='+val.departmentCode+'&doctorCode='+val.doctorCode
				})
			},
			reservaDocClick(){
				this.current = 0
			},
			evaluateClick(){
				this.current = 1
			},
		},
		
	}
</script>

<style lang="scss" scoped>
	.shop_con{
		width:100%;
		height:100%;
		background: #F8F8F8;
		font-family: PingFang SC, PingFang SC;
		.section{
			padding: 30rpx;
			height:calc(100% - 100rpx);
			.top{
				padding: 30rpx;
				background: #fff;
				.title{
					font-weight: 500;
					font-size: 32rpx;
					color: #000000;
					margin-bottom: 10rpx;
				}
				.swiper{
					height:333rpx;
					// background: #eee;
					width:100%;
					margin-bottom: 50rpx;
				}
				.time{
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
					margin-bottom: 14rpx;
				}
				.address{
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
				}
			}
			.tabs_title{
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				span{
					font-weight: 400;
					font-size: 30rpx;
					color: #727272;
					margin-right: 50rpx;
				}
				.activeSpan{
					font-weight: 600;
					font-size: 34rpx;
					color: #000000;
				}
			}
			.tabs_content{
				margin-bottom: 100rpx;
				.list{
					background: #FFFFFF;
					border-radius: 18rpx;
					margin-bottom: 18rpx;
					padding: 30rpx;
					position: relative;
					.dayStatus{
						padding: 14rpx 15rpx;
						background: #FDF6F2;
						font-weight: 400;
						font-size: 26rpx;
						color: #7D2527;
						position: absolute;
						top:0;
						right:0;
					}
					.info{
						display: flex;
						align-items: center;
						margin-bottom: 24rpx;
						image{
							width:110rpx;
							height:110rpx;
							border-radius: 50%;
						}
						.info_box{
							padding-left: 24rpx;
							flex: 1;
							.up{
								display: flex;
								align-items: center;
								margin-bottom: 10rpx;
								.name{
									font-weight: 600;
									font-size: 34rpx;
									color: #000000;
									margin-right: 20rpx;
								}
								.tag{
									flex: 1;
									font-weight: 400;
									font-size: 26rpx;
									color: #000000;
									margin-right: 20rpx;
									// 新增以下样式，实现三行超出显示省略号
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
								}
							}
							.down{
								display: flex;
								align-items: center;
								.hospital{
									font-weight: 400;
									font-size: 26rpx;
									color: #000000;
									margin-right: 20rpx;
								}
								.star{
									font-weight: 400;
									font-size: 26rpx;
									color: #43578E;
								}
							}
						}
					}
					.label{
						display: flex;
						padding: 15rpx 31rpx;
						background: #F5F4EC;
						border-radius: 5rpx 5rpx 5rpx 5rpx;
						margin-bottom: 18rpx;
						.card{
							flex: 1;
							display: flex;
							align-items: center;
							font-weight: 400;
							font-size: 26rpx;
							text{
								color: #333333;
								margin-right: 15rpx;
							}
							span{
								color:#7D2527;
							}
							image{
								width:26rpx;
								height:27rpx;
								margin-right: 10rpx;
							}
						}
					}
					.descraption{
						margin-bottom: 22rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						// 新增以下样式，实现三行超出显示省略号
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 3;
									-webkit-box-orient: vertical;
					}
					.bottomAppointment{
						display: flex;
						justify-content: flex-end;
						.btn{
							width:205rpx;
							height:60rpx;
							line-height: 60rpx;
							text-align: center;
							background: rgba(125,37,39,0.2);
							border-radius: 50px 50px 50px 50px;
							border: 1px solid #7D2527;
							border-radius: 50rpx;
							font-weight: 500;
							color:#7D2527;
							font-size: 35rpx;
						}
					}
				}
			}
		}
		.bottom{
			width:100%;
			position: fixed;
			bottom:0;
			padding: 30rpx 30rpx 80rpx 30rpx;
			background: #fff;
			display: flex;
			gap: 20rpx;
			justify-content: space-between;
			view{
				flex: 1;
				text-align: center;
				height:70rpx;
				line-height: 70rpx;
				border-radius: 50rpx;
				font-size: 30rpx;
			}
			.left{
				border: 2rpx solid #7D2527;
				color:#7D2527;
			}
			.right{
				background: #7D2527;
				color:#fff;
			}
		}
	}
</style>